<script setup lang="ts">
import LoginSlot from '../../components/loginRegisterSlot.vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import chaoXing from '../../assets/icons/chaoxing.svg'
import xueXin from '../../assets/icons/xuexin.svg'

const router = useRouter()
const loginInputList = ref([
  {
    id: 1,
    name: '姓名',
    type: 'text',
    placeholder: '请输入姓名'
  },
  {
    id: 2,
    name: '班级',
    type: 'text',
    placeholder: '请输入班级'
  },
  {
    id: 3,
    name: '密码',
    type: 'password',
    placeholder: '请输入密码'
  }
])

const loginSelectList = ref([
  {
    id: 1,
    name: '学习通',
    icon: chaoXing
  },
  {
    id: 2,
    name: '学信网',
    icon: xueXin
  }
])
</script>

<template>
  <div>
    <login-slot>
      <template #title>
        <h1>Log In</h1>
      </template>
      <template #subTitle>
        <p>
          <span>还没有一个账户？</span>
          <span @click="router.push({ name: 'register' })">注册</span>
        </p>
      </template>
      <template #left>
        <ul class="left">
          <li v-for="i in loginInputList" :key="i.id">
            <p>{{ i.name }}</p>
            <input :type="i.type" :placeholder="i.placeholder" />
          </li>
          <li>
            <el-button class="button" round @click="router.push('/layout')">登录</el-button>
          </li>
        </ul>
      </template>
      <template #right>
        <ul class="right">
          <li v-for="i in loginSelectList" :key="i.id">
            <el-button class="button" round>
              <img :src="i.icon" alt="" />
              <span>使用{{ i.name }}登录</span>
            </el-button>
          </li>
        </ul>
      </template>
    </login-slot>
  </div>
</template>

<style scoped lang="scss">
@import url('@/styles/login/loginRegister.scss');
@import url('https://at.alicdn.com/t/c/font_4605058_jep3ilfzo4j.css');
</style>
